<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <h1>教师初始信息录入</h1>
      </el-col>
    </el-row>
    <el-row class="el_btns">
      <el-button type="primary" id="btn_single" round @click="single"
        >单条录入</el-button
      >
      <el-button type="info" round @click="batch">批量录入</el-button>
    </el-row>

    <!-- 批量录入 -->
    <el-dialog title="批量录入" :visible.sync="dialogFormVisible" class="dialogFormVisible">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">请选择需要导入的表格  <span class="down_tmp" @click="downTemp">下载模板</span> </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消导入</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >开始导入</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        fileList: [
          // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
        ],
        formLabelWidth: '120px'
    };
  },
  computed: {},
  methods: {
    single() {
      this.$router.push({ name: "information-main/main" });
    },
    batch() {
      this.dialogFormVisible=true;
    },
    //下载模板
    downTemp(){
      // window.location.href="https://www.baidu.com";
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  },
};
</script>


<style >
.container {
  text-align: center;
}
.container h1 {
  text-align: center;
  color: #5883ff;
  margin-top: 10rem;
  font-size: 2.5rem;
  font-weight: 500;
}
.container .el_btns {
  margin-top: 8rem;
}
#btn_single {
  margin-right: 5rem;
}
.dialogFormVisible{
  text-align:start;
}
.dialog-footer{
  text-align: center;
}
.down_tmp{
  color: blue;
  cursor: pointer;
}
</style>

